<!DOCTYPE html>
<html>
  <head>
    <title>Border-after in vertical-rl mode, non-visible overflow</title>
    <style>
      body { color:black; background:white; }
      #container {
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        overflow:scroll;
        width:100px;
        border-left:150px solid white;
        background:red;
      }
      #inner { width:200px; background:white; }
    </style>
    <script src="../../resources/check-layout.js"></script>
  </head>
  <body onload="checkLayout('#container'); container.scrollLeft = 0;">
    <!-- We have to set the scroll position, because of https://bugs.webkit.org/show_bug.cgi?id=76129
         Furthermore, inner.scrollIntoView() doesn't work, so just set some insane left value.
         This is just to make it look good; checkLayout() doesn't care. -->
    <p>The word 'HEST' should be seen below, and there should be no red.</p>
    <div id="container" data-expected-scroll-width="200">
      <div id="inner">HEST</div>
    </div>
  </body>
</html>
